/*
 * @Author: 脉迈
 * @Date: 2021-09-15 17:49:49
 * @LastEditors: 脉迈
 * @LastEditTime: 2021-10-26 16:43:00
 */
import React, { FC } from "react";
import { Tabs, message } from "antd";
import {
  SnippetsOutlined,
  CodeSandboxOutlined,
  BuildOutlined,
  FileImageFilled,
  FontSizeOutlined,
  BoxPlotFilled,
} from "@ant-design/icons";
import styles from "./SidebarBox.module.scss";
import {
  pageComponentsState,
  blockActiveIndexState,
  componentActiveIndexState,
} from "store/modules/element";
import { blockImage, blockText, blockButton } from "data/componentItem";
import { useRecoilState } from "recoil";
const { TabPane } = Tabs;

const SidebarBox: FC = () => {
  const [pageComponentList, setPageComponentList] =
    useRecoilState(pageComponentsState);
  const [blockActiveIndex] = useRecoilState(blockActiveIndexState);
  // eslint-disable-next-line
  const [componentActiveIndex, setComponentActiveIndex] = useRecoilState(
    componentActiveIndexState
  );

  // const [pageComponentList, setPageComponentList] = useRecoilValue(pageComponentListSelector)

  /**
   * @descript 添加组件
   */
  const addComponent = (name: string) => {
    if (pageComponentList.length === 0) {
      message.warning("请添加模块后添加组件");
      return false;
    }
    let newPageComponentList: any = JSON.parse(
      JSON.stringify(pageComponentList)
    );
    switch (name) {
      /**
       * @description 添加单张图片的组件
       */
      case "blockImage":
        newPageComponentList[blockActiveIndex]["children"].push(blockImage);
        setPageComponentList(newPageComponentList);

        break;
      case "blockText":
        newPageComponentList[blockActiveIndex]["children"].push(blockText);
        setPageComponentList(newPageComponentList);
        break;
      case "blockButton":
        newPageComponentList[blockActiveIndex]["children"].push(blockButton);
        setPageComponentList(newPageComponentList);
        break;
      default:
        break;
    }
    setComponentActiveIndex(
      newPageComponentList[blockActiveIndex]["children"].length - 1
    );
  };
  return (
    <div className={styles.container}>
      <Tabs defaultActiveKey="3">
        <TabPane
          tab={
            <span>
              <SnippetsOutlined />
              页面模板
            </span>
          }
          key="1"
        >
          敬请期待
        </TabPane>
        <TabPane
          tab={
            <span>
              <CodeSandboxOutlined />
              模块
            </span>
          }
          key="2"
        >
          敬请期待
        </TabPane>
        <TabPane
          tab={
            <span>
              <BuildOutlined />
              组件
            </span>
          }
          key="3"
        >
          <div className={styles.componentContainer}>
            <div
              className={styles.item}
              onClick={() => {
                addComponent("blockImage");
              }}
            >
              <FileImageFilled />
              <p>图片</p>
            </div>
            <div
              className={styles.item}
              onClick={() => {
                addComponent("blockText");
              }}
            >
              <FontSizeOutlined />
              <p>文本</p>
            </div>
            <div
              className={styles.item}
              onClick={() => {
                addComponent("blockButton");
              }}
            >
              <BoxPlotFilled />
              <p>按钮</p>
            </div>
          </div>
        </TabPane>
      </Tabs>
    </div>
  );
};
export default SidebarBox;
